<template>
    <div class="displayItem">
        <div id="separator">{{ product === null ? '' : product.name }}</div>
        <div v-for="(item, index) of itemList" :key="`item-${index}`" class="item">
            <div class="pictureHide">
                <div class="itemPicture" :style="{'background-image': `url(http://192.168.31.68:80/${product === null ? 'default.png' : product.picture})`}" @click="viewItem(item.itemId)"></div>
            </div>
            <div class="contentBox">
                <div class="title">{{ product === null ? '' : product.name }}</div>
                <div class="subTitle">{{ productId }}</div>
                <div class="explain">
                    {{ item.attribute1 }}
                </div>
                <div class="price"><span>￥{{ item.listPrice }}</span></div>
                <div class="addToCart" @click="addItemToCart(item.itemId)">Add to Cart</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
    data() {
        return {
            itemList: null,
            product: null
        }
    },
    computed: {
        ...mapState({
            productId: state => state.product.productId,
            productName: state => state.product.productName,
            signIn: state => state.account.signIn,
            account: state=> state.account.account
        })
    },
    mounted() {
        this.getProductByProductId(this.productId).then((res) => {
            this.product = res
        }, (error) => {
            console.log(error)
        })
        this.getItemListByProductId(this.productId).then((res) => {
            this.itemList = res
        }, (error) => {
            console.log(error)
        })
    },
    methods: {
        ...mapMutations({
            setItemId: 'item/setItemId',
            changeInnerComponent: 'floatWindow/changeInnerComponent',
            changeVisible: 'floatWindow/changeVisible'
        }),
        ...mapActions({
            getItemListByProductId: 'item/getItemListByProductId',
            getProductByProductId: 'product/getProductByProductId',
            addItem: 'cart/addItem'
        }),
        viewItem(itemId) {
            this.setItemId(itemId)
            this.changeInnerComponent('FlexItem')
        },
        addItemToCart(itemId) {
            if(this.signIn === false || this.account === null) {
                this.changeVisible()
                this.$router.push('/login')
                return
            }
            this.addItem({username: this.account.username, itemId}).then((res) => {
                this.changeVisible()
                this.$router.push('/viewCart')
            }, (error) => {})
        }
    }
}
</script>

<style lang="scss" scoped>
#separator
{
    border: none;
    border-bottom: 3px solid #364462;
    text-align: center;
    overflow: hidden;
    width: 20%;
    margin: 35px auto;
    font-size: 2em;
    color: #364462;
}

.pictureHide
{
    width: 674px;
    height: 400px;
    float: left;
    overflow: hidden;
}

.pictureHide .itemPicture
{
    width: 674px;
    height: 400px;
    float: left;
    cursor: pointer;
    background-size: cover;
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.pictureHide .itemPicture:hover
{
    transform: scale(1.05);
}

.item
{
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    height: 400px;
    width: 1000px;
    margin: 70px auto;
    background-color: #efe7db;
    box-shadow: 2px 2px 15px #78a686;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    background-size: cover;
}

.contentBox
{
    height: 100%;
    width: 326px;
    float: left;
    text-align: center;
    color: #833d1e;
}

.item .title
{
    margin-top:  15%;
    font-size: 2.5em;
    font-weight: normal;
}

.item .subTitle, .item .explain, .item .price
{
    margin-top: 5%;
    font-size: 1.5em;
}

.item .addToCart
{
    margin: 10% auto 0 auto;
    width: 50%;
    height: 40px;
    border: 3px solid #833d1e;
    font-size: 1.1em;
    border-radius: 5px;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.item .addToCart:hover
{
    color: #efe7db;
    background-color: #833d1e;
}
</style>